Swizec's front end articles

Swizec's articles in the "front end" category

I aim to write mindblowing emails with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them.

Below are 144 articles filed under front end. Enjoy ❤️

You though computer science has no place in webdev? Here's a fun coding challenge

Why react-hook-form is my new favorite form library

Build a new design system in a couple afternoons

Wormhole state management

Using scopes for elegant JAMStack permissions

Screw web performance, just wait a little 😈

Add granular role-based access to your JAMStack app

Why you should build a form generator

Lemme guess, every project involves 1 or 2 forms and they're all the friggen same. You got forms coming out the wazoo. Render fields. Connect to state. Add field validation. Detect submit. Add form validation. Send fetch request. Repeat.

How tests uncover hidden complexity in simple code

The surprising performance boost from changing gif embeds

Configuring your JAMStack app for prod vs. dev

Mocking and testing fetch requests with Jest

Connecting Gumroad to Auth0 for paywalled JAMStack apps

How GraphQL blows REST out of the water

Let's have a look at hyow GraphQL makes queries so much easier and more pleasant than REST

A promises gotcha that will catch you out

Towards a Gatsby+Suspense proof-of-concept

Experimenting with the new React Concurrent mode

Is hot dog taco?

What if I told you modern tools let you build and launch a small webapp in 30 minutes? Complete with SSL, a .com domain, a database, a documented API, CDN hosting, fast static initial loads, and a hydrated SPA? That's the challenge I posed at Silicon Valley Code Camp this weekend. The audience didn't believe me, so it was time to perform some magic. 🧙

useReducer + useContext for easy global state without libraries

useAuth – the simplest way to add authentication to your React app

The unreasonable difficulty of adding a feature to a Textarea

How to drive React state with D3 transitions for complex animation

A Drilldown Piechart with React and D3

TypeScript's biggest flaw and how you can use ducks to fix it

Is JavaScript really getting too complex?

Getting the CSS out of rendered React components

Svelte takes the best of React and the best of Vue to make something awesome

Custom markdown extensions with Remark and HAST handlers

Trying the new ResizeObserver and IntersectionObserver APIs

BrowserStack – a less painful way to test weird browsers

Fixing laggy UI with React.memo

useDimensions – a React Hook to measure DOM nodes

Why dataviz does better for your career than TODOapps

Behind the curve ... of my bar donut chart 🤨

JavaScript’s most popular dataviz library

An experiment to merge React and Vue

Custom react hooks ❤️

Async, await, catch – error handling that won't drive you crazy

Why CSS-in-JS is winning, an example

Tooltips and state across various d3 charts in a React dashboard!

How to set up Gatsby and Auth0 for easy authentication on your next project

Delightful state management with hooks and Constate

How to build a Remark plugin to supercharge your static site

DRY is a footgun, remember to YAGNI

How to use React Context effectively

Logging 1,721,410 events per day with Postgres, Rails, Heroku, and a bit of JavaScript

Tooltips ... tooltips are not so easy 🧐

Building a React dataviz with React hooks

Oh the things you can learn with a fun weekend hack project 🏗

Waiting for Godot with callbacks, promises, and async

Announcing D3blackbox and useD3

Easy D3 blackbox components with React hooks

React hooks in a nut shell 🥐

Build responsive SVG layouts with react-svg-flexbox

ReactVR/react-360 is great, but maybe not quite there yet

Answering some common questions about React + D3 2018

Creating the perfect rounded edge with D3 curves

Building a filterable log viewer with Downshift and match-sorter

Hire these interns

Intern process part 2 – (my first) webinar, about React context

Use ref callbacks to measure React component size

Tiny React & D3 flamegraph tutorial

Build an animated pure SVG dynamic height accordion with React and D3

Towards a WebRTC mesh network with RTCDataChannel

Learning WebRTC peer-to-peer communication, part 2 – connecting 2 browsers on different devices

Learning WebRTC peer-to-peer communication, part 1

Declarative D3 charts with React 16.3

Using YouTube as a data source in Gatsbyjs

Declarative D3 transitions with React 16.3

Livecoding recap: Blockchain-redux now shares blocks between clients in real-time

Blockchain-redux becomes useful, part 1

Livecoding Recap: A new more versatile React pattern

How our engineering team got 12x faster using these 5 lessons about integrating 3rd-party services

Build a Chrome extension from idea to launch in an afternoon

Silky smooth Piechart transitions with React and D3.js

Make your things pretty with chroma-js

Building an interactive DOM benchmark, preliminary results

What I learned making my first open source React component

Loops are the hardest

3 key insights that make D3.js easy to learn

Fade in lazy loaded images with React and CSS – a quick guide

How to populate react-redux-form with dynamic default values

Advent of Code Day 22 – Sporifica Virus

Advent of Code Day 20 – Particle Swarm

Advent of Code Day 19 – A Series of Tubes

Advent of Code Day 15 – Dueling JavaScript Generators

Advent of Code Day 14 – Disk Fragmentation

How to DDoS yourself with analytics –– a war story

Arcane JavaScript knowledge still useful

How JavaScript linters cause bugs

I was doing code review for a coworker, and it soon became obvious that he used a linter and that the linter gave him a bright idea: _use strict comparisons_.

How you can translate any random D3 example to React

The two ways to build a zoomable dataviz component with d3.zoom and React

More messing with time: Deduping messages between iOS and JavaScript

A Fast Mutex Lamport Lock with JavaScript Promises

N-body Collision Simulation with React, D3, and MobX

Livecoding #34: A Map of Global Migrations, Part 3

Livecoding #30: Dipping my toes in React Native

Livecoding #29: Optimizing React choropleth map rendering

Using HOCs to DRY up your code

Dancing tree fractal with React

Fun surprise: UglifyJS can't ES6

Livecoding #28: Productizing the door-answering Slack bot, Part 1

One awkward thing about MobX: Complex models

Livecoding #27: New React Indie Bundle page almost done

Fast, searchable dropdown inputs with React

I made a python script that converts SVG to React ?

Livecoding #26: A new page for a new React Indie Bundle

How to structure your MobX app for the real world

A tiny ES6 fetch() wrapper that makes your life easier

Livecoding #25: Adding MobX to a vanilla React project

Simple MobX-driven modals

How to use MobX with create-react-app

Histogram in D3v3 vs D3v4

CSS classes don't work the way you think they work

A trick to make your big dataviz load super fast

Backbone → React: Handling state with MobX

Backbone → React: it's a people problem after all ?

Backbone → React – Step 1

A puzzle in JavaScript objects

This is a puzzle you can run into if you’re not careful, and sometimes, despite your best efforts, even if you are careful. It happened to me when I had a settings object that I passed into a view. The view then did things. When I made a new view from the settings object, it looked like the view I had just cleared.

Senior Mindset Book